<template>
	<div>
		<table border cellpadding="10" cellspacing="0">
			<tr>
				<th v-for="(item, index) in order" :key="index">{{ data.head[item] }}</th>
			</tr>
			<tr v-for="(tr, ind) in data.data" :key="ind">
				<td v-for="(item, index) in order" :key="index">
					<div v-if="'tr' + item.slice(2) == 'tr1'">
						<!-- 接收人 -->
						{{ getItemValue(item, tr) }}
					</div>
					<div v-else-if="'tr' + item.slice(2) != 'tr1' && isRead">
						<el-tooltip
							v-if="getItemValue(item, tr, 'history')"
							effect="dark"
							trigger="hover"
							:content="`上次提交:${getItemValue(item, tr, 'history')}`"
							placement="top"
						>
							<span :style="{ color: getItemValue(item, tr, 'red') == '0' ? '' : 'red' }">{{ getItemValue(item, tr) }}</span>
						</el-tooltip>
						<span v-else-if="detailType=='self'&&item.slice(-2) == '_2' && order[index - 1]?.slice(-2) != '_1'" >
							<el-input v-model="tr['tr' + item.slice(2)]" />
						</span>
						<span v-else>
							{{ getItemValue(item, tr) }}
						</span>
					</div>
					<div v-else-if="item.slice(-2) == '_1'">
						<!-- 目标值 -->
						{{ getItemValue(item, tr) || 0 }}
					</div>
					<!-- <div v-else-if="(order[index+1])?.slice(-2)=='_1'">
                    有目标值的输入框
                    <el-input type="number" :min="0" v-model="tr['tr'+item.slice(2)]" @blur="toSave(tr['tr'+item.slice(2)],'tr'+item.slice(2),tr)"/>
                </div> -->
					<div v-else-if="item.slice(-2) == '_2' && order[index - 1]?.slice(-2) == '_1'">
						<!-- 有目标值的完成度 -->
						{{ getItemValue(item, tr) }}
					</div>
					<div v-else-if="detailType=='self'&&item.slice(-2) == '_2' && order[index - 1]?.slice(-2) != '_1'">
						<!-- 无目标值的完成度 -->
						<el-input v-model="tr['tr' + item.slice(2)]" />
					</div>
					<div v-else>
						<el-input type="number" :min="0" v-model="tr['tr' + item.slice(2)]" @blur="toSave(tr['tr' + item.slice(2)], 'tr' + item.slice(2), tr)" />
					</div>
				</td>
			</tr>
		</table>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Data {
	head: object
	data: Array<string | number>
	
}
type Props = {
	data?: Data
	isRead?: boolean
	type?:string
	detailType?:string
}

let props = withDefaults(defineProps<Props>(), {
	data: () => ({ head: {}, data: []}),
	isRead: false,
	type:'self',
	detailType:'self'
})

let order = computed(() => {
	if (props.data) {
		let list: string[] = Object.keys(props.data.head)
		list.sort()
		return list
	}
})
// const judgeVal = (val,item,index) =>{
//     let model = order[index]['tr'+item.slice(2)]
//     console.log('fdfd',val,model)
//     let value = Number(val)
//     if(value){
//         if(value<0){
//             model = 0
//         }
//     }
// }

const toSave = (e, item, tr) => {
	if (e !== 0) {
		if (!Number(e)) {
			// 请输入正确的数值
			ElMessage.error('请输入正确的数值')
			tr[item] = 0
		}
		if (e >= 0) {
			if (tr[item + '_1']) {
				let comp = 0
				comp = ((Number(e) * 100) / Number(tr[item + '_1'])) * 100
				tr[item + '_2'] = (comp / 100).toFixed(2) + '%'
			}
		} else if(e<0) {
			ElMessage.error('请输入大于等于0的数值')
			tr[item] = 0
			tr[item + '_2'] = '0.00%'
		}
	}
}

let defaultValue = ''
const getItemValue = (item, tr, tail = '') => {
	// 对item的长度进行检查，确保slice操作的有效性
	if (item.length < 3) {
		return defaultValue
	}
	// 使用更安全的方式获取属性值，同时通过try-catch捕获潜在的异常
	let key = 'tr' + item.slice(2) + (tail ? '_' + tail : '')
	try {
		return tr[key] || defaultValue
	} catch (error) {
		console.error('Error accessing item:', error)
		return defaultValue
	}
}
</script>
<style scoped lang="scss"></style>
